<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 基本用法 -->
        <h1>{{msg}}</h1>
        <hr>
        <!-- 调用系统自带方法 -->
        <h1>{{msg.toUpperCase()}}</h1>
        <hr>
        <!-- 调用自定义的方法 -->
        <h1>{{reverse(msg)}}</h1>
        <hr>
        <!-- 字符串拼接 -->
        <h1>{{msg+'~~~'}}</h1>
        <hr>
        <!-- 判断：三目运算，格式：条件?满足条件运行:不满足条件运行 -->
        <h1>{{age>=18?'成年':'孩子'}}</h1>
        <hr>
        <h1>{{getName()}}</h1>
    </div>
    <script>
        let vm = new Vue({
            // 挂载点
            el:'#root',
            // 数据
            data:{
                msg:'hello vue',
                age:17
            },
            // 自定义方法
            methods: {
                reverse(val){
                    return val.split('').reverse().join('')
                },
                getName(){
                    console.log(this.msg)
                }
            },
        })
        console.log(vm)
    </script>
</body>
</html>